<template>
<div style="width: 80%;margin-left: 10%;" id="topInfo">

<!--    个人简单信息-->
        <div style=";width:100%;height:100%;display:flex">

            <image-preview :src="customerStore.customer.customerAvatar" :width="150" :height="150" style="border-radius: 50%;position: relative;left: 20%;top: 30px"/>
            <div style="width:90%;margin-left: 15px" >


                <div style="display: flex;font-size: 20px;height:20px;">
                    <p style="background-color: #bfcbd9 ;margin-left: 30%;margin-top: 40px">  昵称:{{customerStore.customer.customerName}}</p>
                </div>
                <div style="font-size: 15px;height:20px;margin-left: 30%;margin-top:60px">
                    <p>  电话:{{customerStore.customer.customerPhone}}</p>
                    <p>  邮箱:{{customerStore.customer.customerEmail}} </p>
                </div>

        </div>

        </div>


<!--    详细信息-->
        <div style="background-color: #e6e6e6;margin-top: 20px">
            <el-tabs tab-position="left" class="demo-tabs" v-model="activeName" @tab-click="handleClick">

            <el-tab-pane label="个人信息" name="first">
                <template #label>
                        <div style="font-size: 15px;">个人信息</div>
                    {{customerStore.customer.customerAvatar}}
                </template>
                <div>
                    <br/>
                    <el-descriptions title="顾客详细信息"
                                     :column="3"
                                     size="large"
                                     border>
                        <el-descriptions-item label="昵称" width="60">{{customerStore.customer.customerName}}</el-descriptions-item>
                        <el-descriptions-item label="年龄" width="60">{{customerStore.customer.customerAge}}</el-descriptions-item>
                        <el-descriptions-item label="性别" width="60">
                            <span v-if="customerStore.customer.customerSex==1">男</span>
                            <span v-if="customerStore.customer.customerSex==2">女</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="手机号" span="1.5">
                            <el-tag size="small">{{customerStore.customer.customerPhone}}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="邮箱" span="1.5">
                            {{customerStore.customer.customerEmail}}
                        </el-descriptions-item>
                        <el-descriptions-item label="住址" span="1.5">
                            <el-tag size="small">{{customerStore.customer.customerAddr}}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="职业" span="1.5">
                            {{customerStore.customer.customerProfession}}
                        </el-descriptions-item>
                        <el-descriptions-item label="操作" span="3" align="center" label-align="left">
                            <el-button link type="primary" icon="Edit" @click="handleupdate" >修改个人信息</el-button>
<!--                            <el-button link type="primary" icon="Edit"  >修改密码</el-button>-->
                        </el-descriptions-item>
                        <el-descriptions-item >
                        </el-descriptions-item>
                    </el-descriptions>
                </div>

               </el-tab-pane>

            <el-tab-pane label="我的文章" name="second">
                <div>全部文章信息</div>
                <div class="item"  v-for="item in postStore.postList2"  style="display: flex;cursor: pointer;border-top: solid 1px" @click="getPostInfo(item.postId)">
                    <div style="margin: 10px 10px">
                        标题:
                        <span style="font-size: 20px;">{{item.postTitle}}</span><span v-html="getEmpty(item.postTitle)"/>
                    </div>

                    <div style="display: flex;margin-right: 5px;text-align: right">

                        <div style="text-align: center;display: flex;height: 25px;margin-top: 10px;">
                            <div>
                                <el-tooltip
                                        class="box-item"
                                        effect="dark"
                                        content="浏览量"
                                        placement="top"
                                >
                                    <el-icon  size="20px" style="margin:2.5px"><Reading /></el-icon>
                                </el-tooltip>
                            </div>
                            <div style="width :40px;line-height: 25px">{{item.postReadCount}}</div>
                        </div>

                        <div style="margin: 10px 0">发布时间：{{item.postCreateAt}}</div>
                    </div>



                </div>
            </el-tab-pane>


            <el-tab-pane label="领养申请" name="third">


                <div  style="height: 10px"></div>
                <div style="background-color: white;">
                    <div style="margin-left: 10px">
                        <div>待审核中</div>
                        <div v-for="item in adoptStore.adoptList1 " style="display: flex;margin-top: 5px;height: 50px;line-height: 50px;">
                            <image-preview :src="item.pet.petImages" :width="50" :height="50"/>
                            <div style="margin-left: 10px;"> 关于“{{item.pet.petName}}”的领养申请</div>
                            <div style="margin-left: 10px;"> 申请时间：{{item.adoptTime}}</div>

                            <div style="margin: auto;width:10px"></div>
                            <div class="infoAdopt"  @click="adoptInfo(item)">查看申请</div>
                        </div>

                    </div>

                    <div style="margin-top: 5px;margin-left: 10px">
                        <div>已审核</div>
                        <div v-for="item in adoptStore.adoptList2 " style="display: flex;margin-top: 5px;height: 50px;line-height: 50px;">
                            <image-preview :src="item.pet.petImages" :width="50" :height="50"/>
                            <div style="margin-left: 10px;"> 关于“{{item.pet.petName}}”的领养申请</div>
                            <div style="margin-left: 10px;"> 申请时间：{{item.adoptTime}}</div>
                            <div style="margin: auto;width:10px"></div>
                            <div class="infoAdopt" @click="adoptInfo(item)">查看申请</div>
                            <div class="infoAdopt2"  style="color: green;margin-left: 15px"    v-if="item.adoptStatus==1">同意领养</div>
                            <div class="infoAdopt2"   style="color: red;margin-left: 15px"     v-else>申请被驳回</div>
                            <el-tooltip content="暂无反馈信息" placement="top" effect="light" v-if="item.adoptResponse==null">
                                <div class="infoAdopt" >查看反馈信息</div>
                            </el-tooltip>
                            <el-tooltip :content="item.adoptResponse" placement="top" effect="light" v-else>
                                <div class="infoAdopt" >查看反馈信息</div>
                            </el-tooltip>
                        </div>
                    </div>

                </div>
            </el-tab-pane>

        </el-tabs>
        </div>

<!--    //修改个人信息对话框-->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
        <el-form ref="customerRef" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="邮箱" prop="customerEmail">
                <el-input v-model="form.customerEmail" placeholder="请输入邮箱" />
            </el-form-item>
            <el-form-item label="电话" prop="customerPhone">
                <el-input v-model="form.customerPhone" placeholder="请输入电话" />
            </el-form-item>
            <el-form-item label="头像" prop="customerAvatar">
                <image-upload v-model="form.customerAvatar"/>
            </el-form-item>
            <el-form-item label="年龄" prop="customerAge">
                <el-input v-model="form.customerAge" placeholder="请输入年龄" />
            </el-form-item>
            <el-form-item label="性别" prop="customerSex">
                <el-select v-model="form.customerSex" placeholder="请选择性别">
                    <el-option
                            v-for="dict in sys_user_sex"
                            :key="dict.value"
                            :label="dict.label"
                            :value="parseInt(dict.value)"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="职业" prop="customerProfession">
                <el-input v-model="form.customerProfession" placeholder="请输入职业" />
            </el-form-item>
            <el-form-item label="家庭住址" prop="customerAddr">
                <el-input v-model="form.customerAddr" placeholder="请输入家庭住址" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </template>
    </el-dialog>
<!--查看领养申请的内容-->
    <el-dialog title="领养申请内容" v-model="adooptOpen2" width="500px">
<!--        {{adInfo}}-->
        <p>家庭人数：{{adInfo.familyNum}}</p>
        <p v-if="adInfo.childrenHas==0">家庭没有小孩</p>
        <p v-if="adInfo.childrenHas==1">家庭小孩描述:{{adInfo.childrenDesc==null?"无描述":adInfo.childrenDesc}}</p>
        <p v-if="adInfo.petHas==0">家庭没有其它宠物</p>
        <p v-if="adInfo.petHas==1">家庭其它宠物描述:{{adInfo.petDesc==null?"无描述":adInfo.petDesc}}</p>
        <p v-if="adInfo.homeType==1">租房状态：自有住房</p>
        <p v-if="adInfo.homeType==2">租房状态：租房</p>
        <p v-if="adInfo.adoptVisit==0">是否允许回访：不允许</p>
        <p v-if="adInfo.adoptVisit==1">是否允许回访：允许</p>
        <p v-if="adInfo.adoptPromise==1">是否同意承诺：同意</p>
        <p v-if="adInfo.adoptPromise==0">是否同意承诺：不同意</p>
    </el-dialog>


<!--    添加送养申请-->
    <!-- 添加或修改收容管理对话框 -->
<!--    <el-dialog :title="title" v-model="adooptOpen3" width="500px" append-to-body>-->
<!--        <el-form ref="shelterRef" :model="form" :rules="rules" label-width="80px">-->
<!--            <el-form-item label="收容人id" prop="shelterCustomerId">-->
<!--                <el-input v-model="form.shelterCustomerId" placeholder="请输入收容人id" />-->
<!--            </el-form-item>-->
<!--            <el-form-item label="宠物id" prop="shelterPetId">-->
<!--                <el-input v-model="form.shelterPetId" placeholder="请输入宠物id" />-->
<!--            </el-form-item>-->
<!--            <el-form-item label="送养原因" prop="shelterPetReason">-->
<!--                <el-input v-model="form.shelterPetReason" type="textarea" placeholder="请输入内容" />-->
<!--            </el-form-item>-->
<!--            <el-form-item label="其他说明" prop="shelterPetOther">-->
<!--                <el-input v-model="form.shelterPetOther" placeholder="请输入其他说明" />-->
<!--            </el-form-item>-->
<!--            <el-form-item label="收容价格" prop="shelterPetPeice">-->
<!--                <el-input v-model="form.shelterPetPeice" placeholder="请输入收容价格" />-->
<!--            </el-form-item>-->
<!--            <el-form-item label="审核反馈" prop="shelterPetResponse">-->
<!--                <el-input v-model="form.shelterPetResponse" placeholder="请输入审核反馈" />-->
<!--            </el-form-item>-->
<!--        </el-form>-->
<!--        <template #footer>-->
<!--            <div class="dialog-footer">-->
<!--                <el-button type="primary" @click="submitForm">确 定</el-button>-->
<!--                <el-button @click="cancel">取 消</el-button>-->
<!--            </div>-->
<!--        </template>-->
<!--    </el-dialog>-->

</div>
    <br/>
    <br/>
    <br/>
</template>



<script setup lang="ts">
    import useCustomerStore from "@/store/modules/customer";
    import { updateCustomer} from "@/api/web/customer.js";
    import {getToken} from "@/utils/auth.js";
    import { ref } from 'vue'
    import  { TabsPaneContext } from 'element-plus'
    import { reactive } from "vue";
    import { toRefs } from "vue";
    import { getCurrentInstance } from "vue";
    const { proxy } = getCurrentInstance();
    const { sys_user_sex, customer_status } = proxy.useDict('sys_user_sex', 'customer_status');
    import {useRouter} from "vue-router";
    const router = useRouter();
    //顾客
    const customerStore = useCustomerStore()
    customerStore.getInfo2(getToken())
    //文章
    import usePostStore from "@/store/modules/post";
    const postStore = usePostStore()
    //申请领养
    import useAdoptStore from "@/store/modules/adopt";
    import {getCustomerId} from "@/utils/auth.js";
    const adoptStore = useAdoptStore()


    //切换标签
    const activeName = ref('first')
    const handleClick = (tab: TabsPaneContext, event: Event) => {
        setTimeout(()=>{
            if(activeName.value == "first"){

            }else if(activeName.value == "second"){
                console.log("获取顾客发布的文章")
                postStore.searchPostByCustomerId(customerStore.customer.customerId)
                console.log(postStore.postList2)
            }else if(activeName.value == "third"){
                const id = Number(getCustomerId());
                console.log("获取顾客领养申请")
                adoptStore.getList1(id)
                adoptStore.getList2(id)
            }else if(activeName.value == "fourth"){

            }
        },1)

    }

    //修改顾客信息
    const title = ref("");
    const open = ref(false);
    const data = reactive({
        form: {},
        rules: {
            customerPhone: [
                { required: true, message: "电话不能为空", trigger: "blur" },
                { pattern: /^1[3456789]\d{9}$/, message: "请输入正确的手机号", trigger: "blur" }
            ],
            customerEmail: [
                { required: true, message: "邮箱不能为空", trigger: "blur" },
                { pattern:  "^[a-zA-Z0-9_+&*-]+(?:\\.[a-zA-Z0-9_+&*-]+)*@(?:[a-zA-Z0-9-]+\\.)+[a-zA-Z]{2,7}$", message: "请输入正确的邮箱", trigger: "blur" }
            ],
        }
    });
    const {  form, rules } = toRefs(data);
    // 取消按钮
    function cancel() {
        open.value = false;
        reset();
    }
    // 表单重置
    function reset() {
        form.value = {
            customerId: null,
            customerEmail: null,
            customerPhone: null,
            customerPwd: null,
            customerName: null,
            customerAvatar: null,
            customerAge: null,
            customerSex: null,
            customerProfession: null,
            customerAddr: null,
            customerStatus: null,
            customerCreateAt: null,
            customerUpdateAt: null
        };
        proxy.resetForm("customerRef");
    }
    /** 新增按钮操作 */
    function handleupdate() {
        form.value = customerStore.customer
        open.value = true;
        title.value = "修改顾客："+customerStore.customer.customerName+"的信息"
    }
    function submitForm() {
        proxy.$refs["customerRef"].validate((valid: any) => {
            if (valid) {
                updateCustomer(form.value).then((response: any) => {
                    console.log(form.value)
                    proxy.$modal.msgSuccess("修改成功");
                    customerStore.getInfo2(getToken())
                    cancel();
                });
            }
        });
    }


    //查看我的文章
    const getPostInfo = (postId:number)=>{
        console.log(postId)
        router.push("/postInfo/"+postId)
    }
   function getEmpty(postTitle:string){
       const length = postTitle.length;
       const size = 34-length
       const char = "&emsp;"
       const a = char.repeat(size)
       console.log(a)
       return  '<span style="font-size: 20px;">'+a+'</span>'
    }

//    查看领养申请
    const adooptOpen2 = ref(false);
    const adooptOpen3 = ref(false);
    const AdoptResponse= ref("")
    let adInfo = reactive({})
    function  adoptInfo(data: any) {
        adooptOpen2.value = true;
        adInfo = data
    }
    function  adoptRes(text:string) {
        adooptOpen3.value = true;
        AdoptResponse.value = text
    }

</script>

<style scoped>
    .demo-tabs > .el-tabs__content {
        padding: 32px;
        color: #e6e6e6;
        font-size: 32px;
        font-weight: 600;
    }

    .el-tabs--right .el-tabs__content,
    .el-tabs--left .el-tabs__content {
        height: 100%;
    }
    #topInfo{
        background-image: url("../../../assets/images/backTop1.png");
        background-size: cover;
    }
    #adoptList{
        cursor: pointer;
        margin-left: 90%;
        margin-top: 5px;
    }
    #adoptList:hover{
        color: blue;
    }

    .infoAdopt{
        cursor: pointer;
        margin-left: 15px;
    }
    .infoAdopt:hover{
        color: blue;
    }
</style>
